import React, {Component} from 'react';
import ReactDOM from "react-dom"
/*类式组件*/
// class Demo extends Component {
//     state = {count:0}
//
//     myRef = React.createRef()
//
//     add = ()=>{
//         const {count} = this.state
//         this.setState({count:count+1})
//     }
//
//     // 点击提示数据
//     show = ()=>{
//         alert(this.myRef.current.value)
//     }
//
//     componentDidMount() {
//         this.timer =  setInterval(()=>{
//        this.setState(state=>({count:state.count+1}))
//      },1000)
//     }
//
//     // 卸载组件
//     unmount = ()=>{
//         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
//     }
//
//     componentWillUnmount() {
//         clearInterval(this.timer)
//     }
//
//     render() {
//         return (
//             <div>
//                 <input ref={this.myRef} type="text"/>
//                 <h2>当前求和为:{this.state.count}</h2>
//                 <button onClick={this.add}>点击+1</button>
//                 <button onClick={this.unmount}>卸载组件</button>
//                 <button onClick={this.show}>点击提示数据</button>
//             </div>
//         );
//     }
// }

/*函数式组件*/
function Demo(){
    // 第一个参数是原来的状态,第二个参数是操作状态的方法
    const [count,setCount] = React.useState(0)


    React.useEffect(()=>{
       let timer =  setInterval(()=>{
            setCount(count=>count+1)
        },1000)
        // 返回一个函数相当于componentWillUnmount
        return ()=>{
            clearInterval(timer)
        }
    },[])

  const myRef = React.useRef()


    // console.log(count,setCount)
    return (
        <div>
            <input ref={myRef} type="text"/>
            <h2>当前求和为:{count}</h2>
            <button onClick={add}>点击+1</button>
            <button onClick={unmount}>卸载组件</button>
            <button onClick={show}>点击提示数据</button>
        </div>
    )
    // 加的方法
    function add(){
        setCount(count+1) // 第一种写法
        // setCount(count=>count+1) // 第二种写法

    }
    // 点击提示数据
    function show(){
        alert(myRef.current.value)
    }
    // 卸载组件
    function unmount(){
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
}



export default Demo;
